I asked this in Shopify forum but no one answers.
In Shopify's admin page, we can edit the HTML of "order confirmation" email, when I get the actual email, the HTML is very different from the one we edit in the admin's page, though I can tell it comes from the same HTML that I edit on admin page. It's just that many styles are added and some HTML elements' order seems changed. I am wondering how these styles are added? Do we have control over it?
This is what I see in gmail as of the order confirmation email:
As you can see the <p> tag has many styles. However, on admin's page, the related code is:
{% capture email_body %}
{% if requires_shipping %}
Hi {{ customer.first_name }}, we're getting your order ready to be shipped. We will notify you when it has been sent.
{% endif %}
{% endcapture %}
.....
<p>{{ email_body }}</p>
There is no styles at all and there is no CSS regarding this P tag.
Shopify loads default styles.css file in all email templates.
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
Before sending email, Shopify parses all that external CSS and add them as inline styles to better support different email clients.
More information on Shopify Website
Related
Dynamic Sections in shopify have dynamically generated ID's and Classes assigned during render. Since these may change from render to render, neither the ID nor the class can be used as CSS selectors. I would like to style a specific instance of a section which appears a few times on my page, but since they ave all been generated from the same template, the only differentiating selector is the dynamic ID and the dynamic Class. But these aren't static and are therefore risky. I haven't found any answer in the shopify documentation nor after talking to shopify support. Is there a method for targeting a specific instance of a dynamic section in CSS?
Yes Shopify adds dynamic ids to sections, those ids are prefixed with shopify-section- and then have a number attached to them like shopify-section-1582309868874, however using this liquid code shopify-section-{{ section.id }} you should be able to re-generate that id.
You can also add unique class names to sections, those can be added in sections settings, example:
{% schema %}
{
"name": "Slideshow",
"class": "slideshow-xyz"
}
{% endschema %}
<div id="shopify-section-[id]" class="shopify-section slideshow-xyz">
[output of the section template]
</div>
refe
To target a specific section in a page you'd add a <style type="text/css"> inside the section – usually I'd add this after the markup and before section settings (aka {% schema %}) – and inside the style tag refer to the section id by it's dynamically generated id #shopify-section-{{ section.id }}, here is an example:
<style type="text/css">
#shopify-section-{{ section.id }} {
{% if section.settings.background_color != blank %}
background-color: {{section.settings.background_color}};
{% endif %}
}
</style>
I want to display a plain django-cms menu. I override the default menu/menu.html template, as I want to display the page's title, alongside the page's menu title. This is for a content navigation, where the additional info of the title is useful.
The default is (in the <a></a>):
{{ child.get_menu_title }}.
What I want is
{{ child.get_menu_title }}<span>{{ child.the_page_title }}</span>
But, somehow, I cant display the title alongside the menu_title. If the field menu_title is set, it overrides the title attribute of the NavigationNode, and it is returned when calling get_menu_title (obviously). Also, the title is not in the attr (NavigationNode attr).
I just ended using
{% load cms_tags %} {% page_attribute 'title' child.id %}
This might not be ideal concerning performance, but works very well. Open but for better solutions!
I'm using Gantry5 framework (with the g5_hydrogen theme) and I created a twig page template which works fine, except the shortcode for the Contact Form 7 plugin apparently does nothing - the form does not display on the page, and when I inspect the element in my browser I just see some blank space between the div tags. My current markup is something like this:
{% block content %}
<content>
<div class="dbc-contact-form">
{{ wp.do_shortcode('[contact-form-7 id="1234" title="Contact"]') }}
</div>
</content>
{% endblock %}
Someone else posted a similar question before, but unfortunately that solution doesn't help in my case - Wordpress twig template shortcode not displayed
Thanks for your help with this.
Try this - {{ post.post_content|shortcodes }}
Trying to build a responsive email template in a Twig file. Using Swiftmailer within a Symfony application to send the emails. Two issues I am having so far is the images only show when I view the email on my localhost not when the email is viewed in Gmail, Inbox or Yahoo!
Linking the images using an absolute path (currently). Also, tried a relative path with the same result.
<img src="{{ absolute_url(asset('bundles/coreecommerce/images/logo.png')) }}">
Problem #2 is include stylesheets. I have some media queries in a stylesheet I am trying to include within a head tag like this.
{% block stylesheets %}
<link href="{{ asset('bundles/coreecommerce/css/email.css') }}" rel="stylesheet" />
{% endblock %}
I'm doing something wrong here. Just not sure what? Can you include stylesheets, inline styles for a responsive email in Twig?
Thanks for any help.
To inline images in your html mails you should take a look at this section of the documentation.
To show you the example with twig, you can start with something like this:
<?php
$message = \Swift_Message::newInstance();
$fileToEmbed = 'a path to image file';
$templateParams = [
'fileToEmbed' => $message->embed(\Swift_Image::fromPath($fileToEmbed)),
];
// then compose the mail like this
$message
// set subject etc...
->setBody($this->twigTemplating->render('yourMailTemplate.html.twig', $templateParams), 'text/html')
;
And then in you twig template you just create a IMG tag with template variable:
<img src="{{ fileToEmbed }}">
So TL;DR you just need that $message->embed(\Swift_Image::fromPath($fileToEmbed)) return value to be passed to your mailing template and use it as src attribute.
To locate the image file within your bundle you can use Kernel::locateResource method like this (assuming that your logo.png is located in CoreEcommerceBundle/Resources/public/images/ directory):
$fileToEmbed = $this->kernel->locateResource('#CoreEcommerceBundle/Resources/public/images/logo.png');
I new to Symfony.
I want a piece of code only to show on pages that are publicly available. Is it possible for Twig to detect if the page is public?
The page is under IS_AUTHENTICATED_ANONYMOUSLY, but I still want the piece of code to show even if the user is already logged-in.
For Example:
www.somesite.com (shows the code, publicly available)
www.somesite.com/login (user login, publicly available, shows code)
//user is not logged in
www.somesite.com/dosomething (only available to logged-in users, code is hidden)
//user goes to the home page, still logged-in
www.somesite.com (must show the code, publicly available)
I know I could manually include the code for my public pages, but is there a way to automatically detect if the page is outside the firewall?
Please Help. =)
You can hide parts of twig template with a check like so:
{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
{# stuff only logged in users can see #}
{% endif %}
Or check for role IS_AUTHENTICATED_FULLY
{% if is_granted('IS_AUTHENTICATED_FULLY') %}
{# stuff only logged in users can see #}
{% endif %}
Check the doc here: http://symfony.com/doc/current/book/security.html#retrieving-the-user-object
i guess there is no way to do this. =(