How to get product-component from product id?

New Member
3 0 0

I want to add buy button to my wordpress site. The problem is I have several hundred products and simply cannot manually generate the button code for each product and copy and paste this to my wordpress site. Worse is everytime the products are updated with import the product id and product-component values changes - so I would have to redo this for every update. This is not practical.

I can get the product id from the SKU using:

https://takase.myshopify.com/admin/products/search.json?query=sku:S0009VD7ASS

So this solves half my problem. What I need though is the product-component number associated with this product id. In this sample, the product-component-c46ce158de1 is what I need.

With this I can then automatically add buy buttons for all my products on my wordpress site.

Any help would be very much appreciated. And without this solution I am simply not able to proceed with shopify. Thank you.

 

0 Likes
Highlighted
Shopify Partner
74 0 3

Hi Eri,

Bryan here,

So you have the WordPress site with Shopify as an eCommerce framework. ? Can  you please share more information on id or here? 

Thanks

01creativeagency@gmail.com
0 Likes
Highlighted
New Member
2 0 1

you could use the SDK (JS) to fetch all the products and then create a totally tailored solution using css and standard html for button or product placement.

for example using

client.fetchQueryProducts({product_ids: theIDs}).then(function(products) {

//do required formattig etc

});

0 Likes
Highlighted
New Member
3 0 0

Bryan, Thank you.

I have Wordpress as my main website and I want to use shopify for the eCommerce. I have a database of all my products from which I generate webpages. I would like to automatically generate buy buttons on these pages but I need two numbers: the shopify product id and the product component.

When I generate a buy button I get HTML that embeds these two codes. In this case they are 'product-component 889b7207c2c and product id 9203041089

    printf("<div id='product-component-889b7207c2c'></div>\n");

    printf("    ShopifyBuy.UI.onReady(client).then(function (ui) {\n");
    printf("      ui.createComponent('product', {\n");
    printf("        id: [9203041089],\n");
    printf("        node: document.getElementById('product-component-889b7207c2c'),\n");
    printf("        moneyFormat: '%%24%%7B%%7Bamount%%7D%%7D',\n");
    printf("        options: {\n");
    printf("  \"product\": {\n");

I have found an easy way to get the product id

https://takase.myshopify.com/admin/products/search.json?query=sku:S0009VD7ASS

I need a way to get the corresponding product component which for this product is 889b7207c2c

With these two numbers I can  then generate buy buttons for all products.

0 Likes
Highlighted
New Member
3 0 0

Hi,

I believe the solution is that "product-component-dc72c025336" in the buy button code is nothing but a random number to serve as a tag.

The Buy Button code starts

<div id='product-component-dc72c025336'></div>

and later this div_id is referenced as:

        node: document.getElementById('product-component-dc72c025336'),

'product-component-dc72c025336' can be changed to anything as long as the two ids match.

Is this correct? For the Buy Button I simply need the product ID and then I need to make sure that for each button the div_id (in this case 'product-component-dc72c025336') is unique.

 

0 Likes
Highlighted
New Member
2 0 0

Yes this totally works!

I took the product ID from the URL on the product page (admin end) and changed both product component numbers to match (just any random number) and it worked!

    <div id='product-component-1888501480710'></div>
        id: '2345677468971',
        node: document.getElementById('product-component-1888501480710'),

Tried it out for a few different products, just changing the product ID and changing the numbers in the component ID (component ID number has to match in both lines) and it seems to solve the hassle of constantly going through the buy button!

0 Likes