Προσαρμογή ή αφαίρεση ενός Κουμπιού αγοράς, μιας ενσωματωμένης συλλογής ή ενός ενσωματωμένου καλαθιού

Μπορείτε να αλλάξετε την εμφάνιση ή τη συμπεριφορά ενός Κουμπιού αγοράς, μιας ενσωματωμένης συλλογής ή ενός ενσωματωμένου καλαθιού, επεξεργαζόμενοι τον κώδικα ενσωμάτωσης στην πηγαία HTML της ιστοσελίδας σας. Μπορείτε επίσης να διαγράψετε μια ενσωμάτωση αφαιρώντας τον κώδικα από την ιστοσελίδα σας.

Ένα Κουμπί αγοράς εμφανίζει ένα προϊόν με ένα κουμπί αγοράς. Μια ενσωματωμένη συλλογή εμφανίζει πολλά προϊόντα. Ένα ενσωματωμένο καλάθι εμφανίζει ένα αυτόνομο καλάθι που μπορούν να χρησιμοποιήσουν οι πελάτες σε διάφορες σελίδες.

Ο Κώδικας ενσωμάτωσης είναι το απόσπασμα κώδικα που αντιγράψατε από τον διαχειριστή Shopify και επικολλήσατε στην HTML της ιστοσελίδας σας όταν δημιουργήσατε το Κουμπί αγοράς ή το καλάθι. Ο κώδικας ενσωμάτωσης είναι γραμμένος σε JavaScript, τη γλώσσα προγραμματισμού που χρησιμοποιείται για την προσθήκη διαδραστικών λειτουργιών σε ιστοσελίδες.

Σε αυτή τη σελίδα

Κατανόηση του κώδικα ενσωμάτωσης Κουμπιού αγοράς

Κάθε Κουμπί αγοράς δημιουργείται από ξεχωριστά μέρη που ονομάζονται συστατικά. Ένα συστατικό είναι μια ονομασμένη ενότητα του κώδικα ενσωμάτωσης που ελέγχει ένα μέρος της εμπειρίας του Κουμπιού αγοράς. Για παράδειγμα, όταν προσθέτετε ένα προϊόν με καλάθι στην ιστοσελίδα σας, ο κώδικας ενσωμάτωσης δημιουργεί τα ακόλουθα συστατικά:

ένα συστατικό product, το οποίο εμφανίζει τις πληροφορίες προϊόντος και το κουμπί αγοράς
ένα συστατικό cart, το οποίο εμφανίζει τα περιεχόμενα του καλαθιού
ένα συστατικό toggle για το καλάθι, το οποίο εμφανίζει το εικονίδιο που ανοίγει το καλάθι

Εάν το συστατικό του προϊόντος σας ανοίγει ένα αναδυόμενο παράθυρο λεπτομερειών προϊόντος, τότε ο κώδικας ενσωμάτωσης δημιουργεί δύο επιπλέον συστατικά: ένα συστατικό modal για το ίδιο το αναδυόμενο παράθυρο και ένα συστατικό modalProduct για τις πληροφορίες προϊόντος εντός του αναδυόμενου παραθύρου.

Στο παρακάτω απόσπασμα κώδικα, υπάρχουν ξεχωριστά συστατικά για το product και το cart:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Κάθε συστατικό διαμορφώνεται μέσω ενός αντικειμένου διαμόρφωσης στον κώδικα ενσωμάτωσης. Ένα αντικείμενο είναι μια δομημένη ομάδα ρυθμίσεων, η οποία μορφοποιείται ως λίστα ζευγών κλειδιού-τιμής:

Ένα κλειδί είναι το όνομα μιας ρύθμισης, όπως buttonDestination.
Μια τιμή είναι αυτό στο οποίο έχει οριστεί η ρύθμιση, όπως 'cart'.

Ένα αντικείμενο είναι παρόμοιο με ένα υπολογιστικό φύλλο: κάθε κλειδί αντιστοιχεί στο όνομα μιας στήλης και κάθε τιμή αντιστοιχεί στα περιεχόμενα ενός κελιού. Για να αλλάξετε την εμφάνιση ή τη συμπεριφορά των Κουμπιών αγοράς, επεξεργαστείτε τα κλειδιά και τις τιμές εντός των αντικειμένων διαμόρφωσης.

Κάθε συστατικό έχει πολλά επεξεργάσιμα κλειδιά. Για μια πλήρη λίστα με τα επεξεργάσιμα κλειδιά, δείτε την τεκμηρίωση για προγραμματιστές. Για να διαμορφώσετε ένα κλειδί που δεν υπάρχει ήδη στον κώδικα ενσωμάτωσης, προσθέστε το κλειδί στο κατάλληλο αντικείμενο. Για ένα παράδειγμα, ανατρέξτε στην ενότητα Αλλαγή της διάταξης μιας ενσωμάτωσης προϊόντος.

Προσαρμογή των στυλ των συστατικών

Κάθε συστατικό έχει ένα ένθετο αντικείμενο διαμόρφωσης styles που ελέγχει την εμφάνιση του συστατικού. Ένα ένθετο αντικείμενο είναι ένα αντικείμενο που τοποθετείται μέσα σε ένα άλλο αντικείμενο.

Το αντικείμενο styles χρησιμοποιεί τη CSS, τη γλώσσα που χρησιμοποιείται για την περιγραφή της οπτικής μορφοποίησης των στοιχείων της ιστοσελίδας. Κάθε κλειδί ανώτατου επιπέδου στο αντικείμενο styles αντιπροσωπεύει ένα στοιχείο στο συστατικό, όπως τον τίτλο ή το κουμπί. Εντός αυτού του κλειδιού, κάθε ένθετο κλειδί είναι μια ιδιότητα CSS (για παράδειγμα, background-color ή border) και η τιμή είναι μια τιμή CSS.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

Οποιαδήποτε έγκυρη ιδιότητα CSS μπορεί να προστεθεί στο styles. Βεβαιωθείτε ότι τα ονόματα ιδιοτήτων με παύλες περικλείονται σε εισαγωγικά.

Για περισσότερες πληροφορίες σχετικά με την προσαρμογή μέσω CSS, ανατρέξτε στην τεκμηρίωση για προγραμματιστές.

Συστατικά ενσωματωμένης συλλογής

Οι ενσωματωμένες συλλογές χρησιμοποιούν τα ίδια αντικείμενα διαμόρφωσης με τα Κουμπιά αγοράς. Για να επεξεργαστείτε τη διάταξη ή άλλες ιδιότητες των προϊόντων εντός της συλλογής, βρείτε το αντικείμενο διαμόρφωσης product και επεξεργαστείτε το με τον ίδιο τρόπο που θα επεξεργαζόσασταν μια ενσωμάτωση προϊόντος. Για να επεξεργαστείτε ιδιότητες της ίδιας της συλλογής, όπως το κείμενο του κουμπιού Επόμενη σελίδα, επεξεργαστείτε αντ' αυτού το αντικείμενο διαμόρφωσης productSet.

Ορισμένα κλειδιά, όπως το κείμενο ενός συστατικού, διαμορφώνονται μέσω ένθετων αντικειμένων. Για παράδειγμα, το κείμενο για το κουμπί Επόμενη σελίδα βρίσκεται στο αντικείμενο text του συστατικού productSet:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

Ένα ερωτηματικό παράθυρο λεπτομερειών προϊόντος είναι ένα αναδυόμενο παράθυρο που εμφανίζει πληροφορίες προϊόντος. Για να κατευθύνετε τον πελάτη σας σε ένα ερωτηματικό παράθυρο λεπτομερειών προϊόντος αντί για το καλάθι, επεξεργαστείτε τον κώδικα ενσωμάτωσης του Κουμπιού αγοράς στην πηγαία HTML της ιστοσελίδας σας.

Βήματα:

Ανοίξτε τον κώδικα HTML της σελίδας που περιέχει την ενσωμάτωση προϊόντος που θέλετε να αλλάξετε.
Βρείτε το αντικείμενο διαμόρφωσης product.
Βρείτε το κλειδί buttonDestination στο αντικείμενο:

options: {
      product: {
        buttonDestination: 'cart'
      }
}

Αλλάξτε την τιμή αυτού του κλειδιού σε 'modal', συμπεριλαμβανομένων των εισαγωγικών:

options: {
      product: {
        buttonDestination: 'modal'
      }
}

Αποθηκεύστε τις αλλαγές σας.

Αλλαγή της διάταξης μιας ενσωμάτωσης προϊόντος

Μια οριζόντια διάταξη ενσωμάτωσης προϊόντος τοποθετεί την εικόνα δίπλα στις λεπτομέρειες του προϊόντος αντί για πάνω από αυτές. Για να μεταβείτε σε αυτήν τη διάταξη, επεξεργαστείτε τον κώδικα ενσωμάτωσης του Κουμπιού αγοράς στην πηγαία HTML της ιστοσελίδας σας.

Βήματα:

Ανοίξτε τον κώδικα HTML της σελίδας που περιέχει την ενσωμάτωση προϊόντος που θέλετε να αλλάξετε.
Βρείτε το αντικείμενο διαμόρφωσης product.
Προσθέστε ένα κλειδί layout και, στη συνέχεια, ορίστε την τιμή σε 'horizontal'. Βεβαιωθείτε ότι η τιμή περιλαμβάνει τα εισαγωγικά και ότι η προηγούμενη γραμμή τελειώνει με κόμμα:

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

Αποθηκεύστε τις αλλαγές σας.

Αλλαγή της εμφάνισης και της συμπεριφοράς μιας ενσωμάτωσης καλαθιού

Για να αλλάξετε την εμφάνιση ή τη συμπεριφορά ενός καλαθιού, επεξεργαστείτε το αντικείμενο διαμόρφωσης cart στον κώδικα ενσωμάτωσής σας.

Βήματα:

Ανοίξτε τον κώδικα HTML της σελίδας που περιέχει το καλάθι που θέλετε να επεξεργαστείτε.
Βρείτε το αντικείμενο διαμόρφωσης cart στον κώδικα ενσωμάτωσής σας:

options: {
      cart: {
        startOpen: false
      }
}

Επεξεργαστείτε ένα υπάρχον κλειδί ή προσθέστε ένα νέο, για να αλλάξετε την εμφάνιση ή τη συμπεριφορά του καλαθιού. Για μια πλήρη λίστα με τα διαμορφώσιμα κλειδιά, δείτε την τεκμηρίωση για προγραμματιστές.
Αποθηκεύστε τις αλλαγές σας.

Διαγραφή Κουμπιού αγοράς, ενσωματωμένης συλλογής ή ενσωματωμένου καλαθιού

Για να αφαιρέσετε ένα Κουμπί αγοράς, μια ενσωματωμένη συλλογή ή ένα ενσωματωμένο καλάθι από την ιστοσελίδα σας, διαγράψτε τον κώδικα ενσωμάτωσής του από την πηγαία HTML.

Βήματα:

Ανοίξτε τον πηγαίο κώδικα HTML της ιστοσελίδας που περιέχει το Κουμπί αγοράς, την ενσωματωμένη συλλογή ή το ενσωματωμένο καλάθι.
Διαγράψτε ολόκληρο τον κώδικα ενσωμάτωσης από την πηγαία HTML, ξεκινώντας από το <script data-shopify-buy-ui> και τελειώνοντας στο </script>. Ακολουθεί ένα παράδειγμα κώδικα ενσωμάτωσης Κουμπιού αγοράς:

<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = ShopifyBuy.buildClient({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>

Αποθηκεύστε τις αλλαγές σας.

Προσαρμογή ή αφαίρεση ενός Κουμπιού αγοράς, μιας ενσωματωμένης συλλογής ή ενός ενσωματωμένου καλαθιού

Σε αυτή τη σελίδα

Κατανόηση του κώδικα ενσωμάτωσης Κουμπιού αγοράς

Προσαρμογή των στυλ των συστατικών

Συστατικά ενσωματωμένης συλλογής

Αντικατάσταση του συνδέσμου καλαθιού μιας ενσωμάτωσης προϊόντος με ένα ερωτηματικό παράθυρο λεπτομερειών προϊόντος

Βήματα:

Αλλαγή της διάταξης μιας ενσωμάτωσης προϊόντος

Βήματα:

Αλλαγή της εμφάνισης και της συμπεριφοράς μιας ενσωμάτωσης καλαθιού

Βήματα:

Διαγραφή Κουμπιού αγοράς, ενσωματωμένης συλλογής ή ενσωματωμένου καλαθιού

Βήματα: