FROM CACHE - en_header

Add a second size guide modal

JanAlexander
Shopify Partner
3 0 1

I'm modifying someone else's code.

 

It started with one modal size chart that opens onClick to a Size Guide (I don't even think it's a button, but a link positioned in a table) button on the Product Pages. It's really just a table with data in it. It's a template called page.sizing.json, the snippet is called size-guide-modal.liquid. In the Section, the product-size-guide.liquid code is rendered.

 

Well, I've created another page template for a different product, so created another page template called page.sizing2.json, a snipped called size-guide-modal2.liquid and changed the product-size-guide.liquid code to match.

 

The new modal (title only) is displaying over the first modal (see screenshot attached).

 

Can some wonderfully knowledgeable person tell me what I'm missing?

 

Thanks,

Cathryn

Screen Shot 2022-08-05 at 7.24.09 PM.png

 

Replies 4 (4)
nburton
Shopify Partner
23 1 3

To simply bring the old one behind the new one try setting its z-index lower than the new one in css. Also you may not have changed all of the values properly within the product-size-guide.liquid . Also I'm not too sure about the numbers in the file name best practice is to spell them out with something like modal-two.liquid try that as well. Hopefully this could help if not I can help trouble shoot further. 

 

If you're looking for help with Shopify development, please feel free to contact me at ninooburton@gmail.com. I'm a Certified Shopify developer and I'd be happy to help you with your project.
made4Uo
Shopify Partner
1959 345 474

Hi @JanAlexander,

 

Do you mind sharing your website so we can take a look? 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
JanAlexander
Shopify Partner
3 0 1

Sorry, if it were my site (still with the developer) I'd give you access. Are there any liquid files I can cut and paste to a doc you think might be the culprit?

Cathy

JanAlexander
Shopify Partner
3 0 1

I guess I'm adding a new modal to the existing structure. The developer created one page (dress sizes) and I'm trying to add another page I've created (vest sizes). So, on the dresses product pages when you click on Size Guide, the dress size modal pops up; on the vest product pages, the vest size modal should pop up. As you can see, when the Size Guide is clicked it brings up both pages, the popUpTitle (only) for the vests OVER the entire dress size guide. I want them to be two separate modals activated when dresses or vests are chosen. So, z-index isn't a factor here.

 As I mentioned in my first post, in order to create another modal similar to the first, I've duplicated the code by:

  • creating a new page -- renamed it sizing-two
  • that created a template -- page.sizing-two.json
  • in snippets -- duplicated size-guide-modal.liquid to size-guide-modal-two.liquid
  • in snippets -- product-size-guide.liquid -- duplicated the render line {% render 'size-guide-modal.liquid', sizeGuideType: 'xxxx' %} and changed it to modal-two.

I found pop-up-modal.liquid which called headings popUpTitle and popUpSubTitle -- do you think I should duplicate that for modal-two?

Both pages are being called when the Size Guide button (not a button) is clicked.

Thanks for your time,

Cathryn