BobbyGeorgiev

oh okay thanks, do you have a suggestion on how to also be able to run that in the mobile section?

Hey @tuanphan have you had a chance to look at this?

Hi @tuanphan, I thought I included it, here is the link https://boyangeorgiev.com/store/p/empire-state-building-nyc-print thank you for looking into it!

Hello, I have some custom code added to my website, through code injection on main Store page to affect products where I want to add a button that opens a lightbox with product dimensions. I have that part working almost fully but when I switch to mobile view that trigger disappears. When I look at the HTML I see that a whole new section for the products turns on and replaces it and that doesn't include my custom trigger. I hope someone could help me on this one. <script> document.addEventListener('DOMContentLoaded', function () { const productPriceElement = document.querySelector('.variant-option-title'); if (productPriceElement && isProductPage()) { const productDimensionsLink = document.createElement('a'); productDimensionsLink.href = '/print-dimensions'; // Replace with the URL of your lightbox-specific page productDimensionsLink.textContent = 'Product Dimensions'; productDimensionsLink.classList.add('lightbox-trigger'); productPriceElement.parentNode.insertBefore(productDimensionsLink, productPriceElement); productDimensionsLink.addEventListener('click', function (e) { e.preventDefault(); loadLightboxContent(productDimensionsLink.href); }); } }); function isProductPage() { // Get the current page URL const currentPageURL = window.location.href; // Check if the URL contains the '/store/p/' pattern return currentPageURL.includes('/store/p/'); } function loadLightboxContent(url) { const lightbox = document.createElement('div'); lightbox.classList.add('custom-lightbox'); const closeButton = document.createElement('span'); closeButton.classList.add('close-button'); closeButton.innerHTML = '&times;'; // Add 'x' symbol to the close button closeButton.addEventListener('click', closeLightbox); lightbox.appendChild(closeButton); // Load the content into the lightbox using an iframe const iframe = document.createElement('iframe'); iframe.src = url; iframe.setAttribute('frameborder', '0'); iframe.setAttribute('allowfullscreen', 'true'); lightbox.appendChild(iframe); document.body.appendChild(lightbox); } function closeLightbox() { const lightbox = document.querySelector('.custom-lightbox'); if (lightbox) { document.body.removeChild(lightbox); } } </script> <style> /* Style for the lightbox trigger (link) */ .lightbox-trigger { text-decoration: underline; font-size: 16px; } /* Style for the lightbox content (iframe) */ .custom-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 9999; } iframe { /* Modify the max-width and max-height properties as needed */ vertical-align: middle; max-width: 95%; max-height: 100%; width: 600px; height: 300px; } /* Style for the close button */ .close-button { position: absolute; top: 10px; right: 20px; cursor: pointer; font-size: 30px; color: #fff; } </style> Best, Bobby

Thanks Tuan, that did the trick!

Thanks @abibacon and @tuanphan . I will go for the plugin approach! @tuanphan could you help me with making product images to be contained ie be fully visible rather than cropped as they are right now? You can use this page as an example - https://boyangeorgiev.com/store/p/azure-ascent-the-shard-at-twilight I saw in the forum a similar discussion and tried using the following code as page injection but it doesn't work for me: <style> .products.collection-content-wrapper .grid-item .grid-item-image { object-fit : contain !important; } </style> So wondering if anyone could help me out on this one. best, Bobby

Hello, I was wondering if anyone has pointers on how to add an accordion to to all products (or many using tags) rather than adding individually through the additional info on each product description. I have it done on this page as an example - https://boyangeorgiev.com/store/p/st-pauls-cathedral-at-sunset-photo-print And I wish to be able to add it all/many products. I suppose this will require some coding which I'm okay with integrating. Would appreciate anyone's input! Best, Bobby

So I did a little nosing around and have found where the event Id lives. The way I see it working is maybe by somehow passing a parameter from our event page to the checkout embed code. As it stands the Eventbrite Embed checkout code goes like this: <!-- Noscript content for added SEO --> <noscript><a href="https://www.eventbrite.co.uk/e/bring-your-own-animation-march-2023-tickets-567045748097" rel="noopener noreferrer" target="_blank">Buy Tickets on Eventbrite</a></noscript> <!-- You can customise this button any way you like --> <button id="eventbrite-widget-modal-trigger-567045748097" type="button">Buy Tickets</button> <script src="https://www.eventbrite.co.uk/static/widgets/eb_widgets.js"></script> <script type="text/javascript"> var exampleCallback = function() { console.log('Order complete!'); }; window.EBWidgets.createWidget({ widgetType: 'checkout', eventId: '567045748097', modal: true, modalTriggerElementId: 'eventbrite-widget-modal-trigger-567045748097', onOrderComplete: exampleCallback }); </script> As I see the only info that relates to which event the button would lead to I have made bold. So I was wondering if that can take a parameter that is on the website instead so that when we create new events I can pass the event Id info in the source url, rather than having to edit the embedded button code. Thanks in advance for any help. Best, Bobby

Hello, I was hoping if I could get some help with the following case: I was wondering whether it is possible to use the Source URL section in a Events page to drive the link that goes into the Code Embed button for an Eventbrite sign-up. Currently when creating a new event and updating the embedded Tickets button from Eventbrite me and my team would have to also change the code inside the embed block. Which currently is as follows: Website URL - https://london.siggraph.org/events/drink-draw-march-2023 <!-- Noscript content for added SEO --> <noscript><a href="https://www.eventbrite.co.uk/e/drink-draw-march-2023-tickets-559358595617" rel="noopener noreferrer" target="_blank">Buy Tickets on Eventbrite</a></noscript> <!-- You can customise this button any way you like --> <button id="eventbrite-widget-modal-trigger" type="button">Get Tickets</button> <script src="https://www.eventbrite.co.uk/static/widgets/eb_widgets.js"></script> <script type="text/javascript"> var exampleCallback = function() { console.log('Order complete!'); }; window.EBWidgets.createWidget({ widgetType: 'checkout', eventId: '559358595617', modal: true, modalTriggerElementId: 'eventbrite-widget-modal-trigger', onOrderComplete: exampleCallback }); </script> I was wondering if on the second line instead of having to edit the embed block if it could somehow read the Source URL given in the settings for the specific Event. If you have a better idea on how to do this I would also appreciate that. Hope I have been clear and thanks in advance for any help provided! Best, Bobby