I want to display a modified version of a product page - for example, something as simple as not displaying the buy button, based on an external validation/check. theoretically, it's not that complicated, but I'm stuck.
Here is what I know/see/understand.
In liquid code, there is
templates -> product.json
sections -> main-product.liquid
I created
templates -> product.alternate.json (a duplicate of product.json minus the buy button)
snippets -> alternate-product.liquid (which is just content_for_layout)
changes in template.liquid to handle the a product template
If I change the product template to alternate - my snippet correctly loads and the alternate product without the buy button is displayed correct.
I change alternate-product.liquid to do an ajax call to to get app proxy.
On app proxy I've tried
returning the same data as product.json, liquid content type this didn't show anything in the body (header and footer are there)
using the site access token to fetch a hardcoded product by id and returning this json (content-type json), same, it's just header and footer.
What I'm trying to do is use a $.get('/apps/s/serve/some-unique-id') that will render the correct json/liquid that shows or doesn't show, the buy now button "some-unique-id" is a client side id.
I know we can manually create the needed HTML tags server side and send them - but this doesn't use the theme/style that's already applied for the rest of the shopify site.
Related
I am writing an app and I want to make a switch button to hide/display 'Add to Cart' button by using this app. How can I write code and implement this in Liquid.
Assuming you are using PHP (Laravel) as the backend for your Shopify App you could use the "phpclassic/php-shopify" library and call the "ScriptTag" method to load an external Javascript file into a store's front-end. The JavaScript file would have to manipulate the DOM to hide/display the Add to Cart button.
Code to hide any add-to-cart buttons might look like:
Array.from(document.querySelectorAll('button.add-to-cart')).map(el=>el.style.display='none');
If you wanted to conditionally hide buttons for specific products, then the JavaScript file would need to talk to your App back-end to obtain that information.
Note that this does not involve Liquid at all. Liquid is the theme template laguage Shopify uses. Programmatically modifying the theme's liquid files is a more difficult approach and liquid files you've added via an App get left behind if your App is uninstalled.
I am using Liferay 7.2. I want to display the viewURL link of an asset publisher in a Display Page Templates page. I couldn’t solve the problem. After searching, I realized that this problem can be solved in three ways:
Method 1:
1- As and admin, in Web Content>Structures create a structure (News Article) and make a Template for that structure.
2- Create page A and add an asset publisher. In this asset publisher: In Asset Selection choose Web Content Article as Asset Type and choose News Article as sub structure. In Display Setting tab choose View in Context as Asset Link Behavior.
3-In Site Builder>Pages create a Display Page Template (page B). Edit it and add an asset publisher similar to page A. However, in page B, in Configuration of asset publisher, in Display Settings choose Show Full Content as Asset Link Behavior and tick Set as the Default Asset Publisher for This Page and Show only assets with Page B as its display page template.
4-Create some News Article. In Display Page Template section, choose Specific Display Page Template and Page B.
In page A, everything is OK. However, when I click on ViewURL of an asset entry, it will redirect to page B. But, in asset publisher section of page B, no results is shown (There are no results.). Means that the chosen asset of page A is not shown in Display Page Template of page B.
Method 2:
Maybe the simplest method is editing Display Page Template (page B) in Section Builder>Content Display add Display Page Template. However, as stated in this issue , the display page content section only shows the summary and no style can be shown. Maybe it is necessary to edit abstract.jsp file. But, I don’t know how to do this.
Method 3:
Create a Widget Template and add it to page B. The article data of the selected asset can be obtained from the URL. However, I couldn’t get the data of the selected article.
I appreciate for any help in this regard.
An Asset Publisher instantiated in a Display Page Template won't show the page Web Content. One way to show an Web Content in a Display Page Template, is to instantiate a Fragment and map the Web Content fields to it, as shown here.
So, to solve your problem, you would need to change Page's B Asset Publisher to one or more Fragments, and map your News Article fields to them.
You could also map the Web Content to your own custom Fragmets, using Fragments lfr-editable fields
<lfr-editable id="unique-id" type="text">
This is editable text!
</lfr-editable>
Another way is to get the Web Content Java Object instance inside a Freemarker (a Fragment, Widget Template, Web Content Template, etc) with this snippet (only works for 7.3+)
${Request.INFO_ITEM}
Facebook Feed Dialog 2.9 has deprecated the custom fields (name, caption, picture, description) - https://developers.facebook.com/docs/sharing/reference/feed-dialog.
I'm working on an AJAX site where all content and metadata is loaded dynamically. If I just use the link property, the metadata isn't set on initial retrieval of the page so the post doesn't contain the right content.
How can I share an AJAX page on Facebook without having to go down the route of prerendering static pages server side? Thanks
If you can program your page to populate the appropriate metatags on the page load based off of a variable http:/yoursite.com/yourpage.php?thisversion=1 then when you want to share version 1 of the page, you just share the URL with the appropriate variable to populate it. You can still remain on your current version of the page but when you share the URL that would prompt that specific version, facebook makes a call to that respective URL and pulls the appropriate metatags that would be populated by your variable without having to reload the page your are currently displaying. Sorry I don't have time at the moment but will try and comeback and add some sample code for clarity.
This question exists in different flavors, but not for AJAX pages.
I use AJAX to pull a single video into my page and I want a custom FB share button for it. Everything I've read so far says that FB pulls the required title and image from meta-tags in the page's < head> section (og:image and og:title).
I've tried to change the meta properties when the AJAX call returns, before rendering the share button. This hasn't worked. It uses the values that were present upon initial page load. I have yet to encounter a single answer to this question.
Are there data attributes I can add to the 'fb-like' div to specify a custom title and image (similar to data-href)?
Danke!
You need an individual URL for each individual piece of content that you want to share. Open Graph objects (and simple shared links “become” such, automatically) are identified by their URL (og:url).
Now if your whole page is built on AJAX, you still need to create such individual URLs somehow – the Facebook scraper tool does not “speak” JavaScript, and relies solely on the OG meta information that the server delivers for any URL it requests.
Since the hash part of an URL is only of relevance client-side (and does not even get send to the server), “typical” AJAX URLs that rely on those to tell the client which piece of content to load in the background are no good here.
So if you want to share two pieces of content (videos) as http://www.example.com/?v=vid1 and http://www.example.com/?v=vid2, then you have to make sure that your server delivers the meta data for each video under its respective URL.
I am new to Magento enterprise edition. I need to enable some buttons(Page, News & Video) regarding the product details in my front-end. On mouse click, i need to fetch data related to the product from another website through search key. Is there any solution through which we can directly fetch the data on mouse click or is there any third party tool through which we can access data
As per your requirement an my understanding you need some data to be fetched from another site on mouse click for a product.
On mouse click event you need to do an Ajax request passing the product id or something that is being identified and used by other site as a parameter