2

tl;dr: What's the proper way to insert a mixin within a links href attribute?

I'm starting to use Pug but I ran into an issue when I tried to use a mixin to generate an attributes value. Within my template I need to use a shortcode from a third-party website to include the phone number (and other settings) dynamically; which I've created a simple mixin to generate:

//- mixins.pug

mixin setting(value)
    | [setting:#{value}]

Within my header.pug template I am trying to code a default link for the phone number, which I'm inserting within the right-widget block; using a three-column header. The shortcode that the mixin generates, when processed by the third party server, grabs the phone number from their database.

//- header.pug

block right-widget
    h3.title
        | Call:
        a(href='tel:' +setting('Company Phone'))
            +setting('Company Phone')
    +button_reserve

When I try and include the setting mixin so it creates the shortcode for the phone number, it ends up being inserted as a string. Here is an example of the generated HTML:

<h3 class="title">
    Call: <a href="tel:" settings('Company="settings('Company" Phone')="Phone')">companyPhone</a>
</h3>

Instead of the desired result:

<h3 class="title">
    Call: <a href="tel:[setting:Company Phone]">[setting:Company Phone]</a>
</h3>

A solution I tried was using unbuffered code to include the mixin like so:

//- header.pug

block right-widget
    - var phone = +setting('Company Phone')
    h3.title
        | Call:
        a(href='tel:' + phone)
            phone
    +button_reserve

But when I do this, I get an error saying that setting (the mixin) is not a function. I also tried it without var as well, just to see what would happen. When searching, I see nothing discussing this. The solutions I tried were from this stackoverflow post. Both of the single line & multi line solutions must be outdated, because they did not work for me.

What's the best way to go about setting this up?

Blake Bell
  • 376
  • 5
  • 16

1 Answers1

0

Mixins are meant to be used at the tag level. A simple mixin for your a tag could be:

mixin setting(value)
  a(href= 'tel:[setting:' + value + ']')= '[setting:' + value + ']'

You can also use javascript functions to do things like string manipulation:

- let settingString = (value) => { return '[setting:' + value + ']'}

Combining them can be powerful, and is likely what you're looking for:

// function
- let settingString = (value) => { return '[setting:' + value + ']'}

// mixin (that uses the function)
mixin settingLink(value)
  a(href= 'tel:' + settingString(value))= settingString(value)

// mixin call
h3.title
  | Call: 
  +settingLink('Company Phone')

This renders:

<h3 class="title">
  Call: <a href="tel:[setting:Company Phone]">[setting:Company Phone]</a>
</h3>
Sean
  • 6,873
  • 4
  • 21
  • 46
  • Thanks for responding Sean, I really appreciate it. So would you recommend setting up all ~20 shortcodes like this within a single file and just including the functions anytime they need to be used instead of using the mixins since some need to be used within attributes? Something like third-party-shortcodes.pug with what you mentioned above? Maybe defining a class with them all would be better? Would both of these be ideal to use when working with Pug/js? – Blake Bell Sep 18 '18 at 20:47
  • Can you expand your question with the full range of "shortcodes" and how you're wanting to use them? There may be a more efficient way to do it but it's hard to tell from the limited example – Sean Sep 19 '18 at 14:24
  • Sure thing. So, `[setting:Company Phone]` is just one of the shortcodes I will be inserting somewhere within the pug templates for this project. There are also quite a few other ones, like `[social media]`, `[recaptchajs]`, `[image]`, `[text]`, `[video]`, etc. Most of these shortcodes also have their own attributes that can be set, somewhat like an HTML element has attributes. – Blake Bell Sep 19 '18 at 15:40
  • So an example for the image shortcode would look something like `[image:!{className}?d=!{defaultUrl}&w=!{width}&h=!{height}]` The video shortcode has similar attributes as well as some of the other ones. While some of these generate their own HTML when loaded on the third-party platform, some of them are meant to be used within HTML attributes (like class, href, etc.) Would it be best to re-organize these as functions, instead of mixins, contained within a pug template file and just include them when I need to use them, or is there a better way to set these up for use within Pug? – Blake Bell Sep 19 '18 at 15:40
  • If that doesn't make sense then let me know and I'll make a new question and link it, thanks for helping. – Blake Bell Sep 19 '18 at 15:44
  • A new question with a link would be helpful. It's hard to tell what are meant to be parameters and what will static text within the rendered shortcode. – Sean Sep 19 '18 at 16:46