Custom code for "price on request" SS7.0 commerce. site

Site URL: https://www.morganoakes.com/new-tribal-art

My client has an e-commerce site with some items that are "price on request." I've used a tag ("por") for these items in order to hide the price and add-to-cart button, and instead display "Price on Request." However, I'm having trouble finding the selector ID for when the item appears in a summary block as they do on this page: https://www.morganoakes.com/new-tribal-art. The fourth item "Woman's Stool" shows price as 0 -- it should say price on request. 

I've had to add custom code when a price-on-request item appears in other blocks. It occurred to me that I should be able to make this a global change, without having to target different types of blocks. If the latter is not possible, can anyone help me target the price on request items for this "New Tribal" items page? This page is made of summary blocks pulling from the 4 different shop pages for the different regions.

Thanks for reading!

first screenshot is how item appears on New Tribal page summary block, second is how it appears as a "you might also like" item...

Can you enable tag on Summary? I remember I Faced a similar problem & I used jQuery code to recognize tag, then append tag to parent item, then we can use CSS to target these products and change 0.00 to Price on Request.

On 8/20/2022 at 7:06 AM, hae said:

Thank you, Tuan. You reminded me that I had used jQuery on the 7.1 version of this website. (We've gone back to the 7.0 version for now.) I used this in footer code injection:

<script>
window.addEventListener('DOMContentLoaded', (event) => {
  var products = document.querySelectorAll('.product-price'), sf, len = products.length;
  for (sf=0; sf<len; sf++) {
    var price = products[sf].querySelector('.sqs-money-native');
    if (price.textContent === '0.00') {
      price.parentNode.textContent = 'Price on Request';  
    }
  }
});
</script>

Did you solve it?

On 8/20/2022 at 7:21 PM, tuanphan said:

Did you solve it?

yes, working now! thanks!

The Javascript code that I used came from @Paul2009: https://sf.digital/squarespace-solutions/how-can-i-make-some-prices-poa-on-squarespace-71

This worked much more effectively than what I was doing with just the tag and CSS.

On 8/17/2022 at 7:31 PM, tuanphan said:

Can you enable tag on Summary? I remember I Faced a similar problem & I used jQuery code to recognize tag, then append tag to parent item, then we can use CSS to target these products and change 0.00 to Price on Request.

Hello Tuan,

I am attempting to do something like this, using querySelector, via JavaScript, to append new divs to the grid-items of the grid-list products page.  I'm just guessing this is the only way to do this, as I don't see a way to alter that section.

Can you help with this?  Should I start a new thread?

Thank you. 

@tuanphan

Please pardon the duplicate, but I'm switching accounts and need to receive responses on this account.  I asked the question above as RHenny:

Hello Tuan,

I am attempting to do something like this, using querySelector, via JavaScript, to append new divs to the grid-items of the grid-list on the products page.  I'm just guessing this is the only way to do this, as I don't see a way to alter that section.

Can you help with this?  Should I start a new thread?

Thank you

On 10/6/2022 at 5:15 PM, BlockHead said:

@tuanphan

Please pardon the duplicate, but I'm switching accounts and need to receive responses on this account.  I asked the question above as RHenny:

Hello Tuan,

I am attempting to do something like this, using querySelector, via JavaScript, to append new divs to the grid-items of the grid-list on the products page.  I'm just guessing this is the only way to do this, as I don't see a way to alter that section.

Can you help with this?  Should I start a new thread?

Thank you

I just wanted to update my post with my solution. 

I originally used the Page Header Code Injection to add the script but it didn't work.  My thought was that the parent divs I was attempting to append to were not loaded yet and that they couldn't be found.  I then added the script to the footer, via a code block, and this solved it—allowing the parent divs where I wanted to append the new divs to load first.