2017-10-16 11 views
1

Pas sûr de la meilleure approche pour brancher le site Web de météore js pour magasiner en utilisant un bouton Acheter. Pour initializie l'API Shopify - http://shopify.github.io/js-buy-sdk/ - directement, j'importer les paquets Shopify-acheter et NPM-Shopify promesse utilisantAjouter shopify acheter bouton pour meteor js site Web

meteor npm install --save shopify-buy 
meteor npm install --save shopify-promise 

Ces paquets apparaissent dans package.json

}, 
    "dependencies": { 
    "babel-runtime": "^6.26.0", 
    "bcrypt": "^1.0.3", 
    "shopify-buy": "^0.7.1", 
    "shopify-promise": "0.0.5", 
    "simpl-schema": "^0.3.2" 
    }, 

Il y a cet exemple de http://shopify.github.io/js-buy-sdk/examples/

<em>After fetching a product with the product ID we use the promise function to generate some markup with the required attributes and content, and add it inside our HTML container element.</em> 

client.fetchProduct('your-product-id').then(function(product) { 

    var html = 
    "<img class='product__image' src='" + product.selectedVariantImage.src + "' >" + 
    "<h2 class='product__title'>" + product.title + "</h2>" + 
    "<a class='product__buy' href='" + 
    product.selectedVariant.checkoutUrl(1) + 
    "'>Buy Now!</a>"; 

    $('#product-1').html(html); 

}); 

Mais ne sais pas comment je passe ce html retour au modèle de météore depuis que je dois passer en arrière seulement des données. En utilisant un code JS similaire à celui ci-dessus, j'ai essayé d'ajouter l'URL du bouton Shopify à chacun de mes produits en tant que champ shopifyBuyUrl. Je le fais dans le serveur/startup.js

Meteor.startup(function() { 
     var shopifyBuyUrl = require('shopify-buy'); 

     const shopClient = shopifyBuyUrl.buildClient({ 
      api_key: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", 
      accessToken: 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy', 
      domain: 'test1.myshopify.com', 
      appId: '6' 
    }); 
    [ ... then I have code here that loads the product categories array - this array has 6 categories and an array of products within each category ...] 
    [next I try and pre-fill the shopifyBuyUrl value for each product] 

    for (var i=0; i < 6; i++) { 
      // fetch a product using resource id 
      for (var j=0; j < products[i].length; j++) { 
       // shopify product id is hardcoded for now 
       products[i][j].shopifyProductId='12836712587'; 

       shopClient.fetchProduct('12836712587').then(function(product) { 

       products[i][j].shopifyBuyUrl=product.selectedVariant.checkoutUrl(1); 
       }) 
        .catch(function() { 
          console.log('Request failed'); 
        }); 
       } 
      }  

     console.log('Inserting categories into MongoDB ...'); 
     for (var i=0; i < 6; i++) { 
      Categories.insert(
       { 
        img_alt:name[i], 
        img_src:src[i], 
        desc:desc[i], 
        products:products[i], 
       }); 
     } 
} 

Le code ci-dessus est en mesure d'authentifier avec Shopify et créer le shopClient exemple. L'appel shopify pour créer l'URL Shopify Buy réussit parfois et parfois il échoue à enregistrer le message 'Requête échouée'. Vous ne savez pas si les échecs sont liés à l'utilisation répétée du même identifiant de produit! Comme je ne suis pas sûr d'utiliser directement l'API Shopify ou d'utiliser un package meteor shopify, j'ai également ajouté le package https://github.com/froatsnook/meteor-shopify à mon projet et l'authentification a fonctionné pour ce package. Mais le paquet API/démos ne sait pas comment utiliser ce paquet pour activer Shopify Buy.

Donc globalement ce n'est pas clair pour moi quelle est la meilleure/bonne approche pour utiliser Shopify avec Meteor JS. Est-ce que froatsnook est le chemin à parcourir ou n'est-il plus applicable? Idéalement, il semble préférable d'aller directement à Shopify, mais je ne sais pas comment cela fonctionne avec météore.

Toute aide pour ajouter le bouton Acheter Shopify à un projet Meteor JS serait appréciée.

Répondre

0

Le correctif est basé sur ce lien https://help.shopify.com/manual/sell-online/buy-button/create-buy-button. Le code est intégré dans le corps de la page. Je stocke les variables pour shopify prod id et shopify prod composante dans les données source pour chaque produit. Il est possible d'extraire tout ou partie des données du produit à partir de shopify ou d'utiliser les données de MongoDB que le site Web meteor stocke.

Je ne sais pas si l'approche que j'avais initialement essayé, basée sur la création d'une URL de bouton Acheter à partir du résultat de l'appel products[i][j].shopifyBuyUrl=product.selectedVariant.checkoutUrl(1); pourrait également fonctionner.

1

Etes-vous sûr de vouloir utiliser la bibliothèque avant de l'utiliser?

Quelque chose comme cela devrait faire:

var ShopifyBuy = require('shopify-buy'); 

Il est difficile de dire ce qui se passe à coup sûr avec si peu d'informations.

Edit:

utiliser comme ceci

const shopClient = ShopifyBuy.buildClient({ 
    accessToken: 'bf081e860bc9dc1ce0654fdfbc20892d', 
    appId: 6, 
    domain: 'embeds.myshopify.com' 
}); 
+0

J'ai ajouté cette var mais j'obtiens 'W20171016-21: 19: 23.685 (1)? (STDERR) Erreur: new Config() nécessite l'option 'accessToken'' J'ai également mis à jour mon Q avec plus de détails pour le rendre plus clair. – striker77

+0

Changer 'var' en 'const' et ajouter le jeton d'accès travaillé. Merci pour ça. Maintenant, juste besoin d'ajouter un bouton Acheter à mon formulaire de commande de produit. Penser à ajouter l'URL 'Buy Button' au tableau de produit quand je construis un tableau dans server/startup.js. Bien que je ne sois pas clair ce que le «1» se réfère ici? 'product.selectedVariant.checkoutUrl (1)' – striker77

+0

@ striker77 var à const n'affectera pas si cela fonctionne ou non. Je ne sais pas vraiment ce que vous voulez dire avec la chose 'product.selectedVariant.checkoutUrl (1)'. N'oubliez pas de choisir ma réponse comme correcte si cela a aidé! :) – bezzoon