Contact_us

[burt]

I have been moving all my addons over to an input box rather than a selection of set values, for the reason that @Kofod95 describes - better flexibility of display.

However, a small part of the PI system is slightly different as the logic requires just a number (which is what the selection does).

[burt]

The child modules were not going full width on small devices, that is, the same as the product_info PI, so change Line 7 in tpl_cm_cu_modular.php to be the same as https://github.com/CE-PhoenixCart/Phoen ... lar.php#L7
That is, adding in sm-
Missed that on my first test.
Took a bit of digging to find the cause but found it by comparing tpl_cm_pi_modular.php and tpl_cm_cu_modular.php
I have updated the zip in the previous post viewtopic.php?p=9709#p9709 with that change and edited the post to include the step of installing the new π Modular contact_us content_module
Perhaps somebody else can do another test on the CM Modular zip.

col-12 should work exactly the same as col-sm-12
col-12 is shorthand for "col-sm-12 col-md-12 col-lg-12 col-xl-12"

[heatherbell]

col-12 should work exactly the same as col-sm-12
col-12 is shorthand for "col-sm-12 col-md-12 col-lg-12 col-xl-12"

Well, before adding the sm- I see the following which is not expected

100622-01.png

and after adding the sm- I see the following which is expected

100622-02.png

[Kofod95]

You are both right:
col-12 would give full width on all devices. col-7 would give 7 width on all devices, but col-sm-7 would give full width on xs-screens but 7/12 on sm+ screens (it would be the same as col-12 col-sm-7 col-md-7 col-lg-7)

//Daniel

[ecartz]

col-12 should work exactly the same as col-sm-12
col-12 is shorthand for "col-sm-12 col-md-12 col-lg-12 col-xl-12"

No. col-12 would be the same as col-xs-12, but they got rid of col-xs-12 so they wouldn't have two that did the same thing. https://getbootstrap.com/docs/5.0/layou ... id-options

Or more specifically, https://getbootstrap.com/docs/4.0/migra ... rid-system

xs grid classes have been modified to not require the infix to more accurately represent that they start applying styles at min-width: 0 and not a set pixel value. Instead of .col-xs-6, it’s now .col-6. All other grid tiers require the infix (e.g., sm).

I've seen this described as "they got rid of XS" but that's not quite correct. There's still an XS, but they no longer have classes like col-xs-12 only like col-12.

Anyway, in the context here, col-12 affects all screens where col-sm-12 only affects small (sm) screens and larger.

[heatherbell]

Only had time for a quick play and probably using Info Pages like a hammer (badly) to treat everything like a nail but used a copy/clone of the CU PI Layout 'Text' module - that is, copied the main file, the tpl_ file and the language file, changed all names and references to new names.
Made a new Info Page like here viewtopic.php?f=28&t=1337 with a slug of FAQ
Then edited the new module file with the info_pages "magic" that gets the title and text of a page with like:

Code: Select all

    public function getOutput() {
      $page = info_pages::getElement(['p.slug' => CU_INFOPAGE_SLUG, 'pd.languages_id' => $_SESSION['languages_id']], 'pages_text');
      $page_title = info_pages::getElement(['p.slug' => CU_INFOPAGE_SLUG, 'pd.languages_id' => $_SESSION['languages_id']], 'pages_title');
    //  $text = CU_TEXT_PUBLIC_TEXT;
      
      if (!Text::is_empty($page)) {
        $tpl_data = ['group' => $this->group, 'file' => __FILE__];
        include 'includes/modules/block_template.php';
      }
    }

and added a configuration to it that enable slug choice like:

Code: Select all

        'CU_INFOPAGE_SLUG' => [
            'title' => 'Info Page Slug',
            'value' => 'FAQ',
            'desc' => 'Enter Slug of Info Page to show.',
          ],

Then edited the tpl_ file to display the info page title and text like:

Code: Select all

<div class="<?= CU_INFOPAGE_CONTENT_WIDTH ?> cu-infopage">
<div class="alert alert-info">
<?= $page_title?>
</div>
  <div>
    <?= $page?>
  </div>
</div>

And it still gives me a child-like joy when I see things work:

Screenshot 2022-06-11 063521.png

I can't even imagine how I could have done this a few years back so many thanks to burt and ecartz for making life better.
In the screenshot, edited tpl_cu_form to change all the col-sm-3 and col-sm-9 to col-12 and removed all the text-right so the form looks better at narrow width.

[heatherbell]

In the screenshot example in my original post in this topic, an OpenStreetMap can be seen.
OpenStreetMap is free to use though it is worth remembering that although some things are free to use, it does not mean they cost nothing to maintain and support so donate to them if you use it.
Making a CU PI module to show it is basic enough by using a copy/clone of the CU PI Layout 'Text' module, just use the code obtained from OpenStreetMap in a constant in the language file but there are known issues with the code on some browsers.
Took us a while to find a solution so just passing it on here so it might save somebody else the time.
So start by going to https://www.openstreetmap.org
1. Navigate to the area and zoom to what you want to display.
2. Click the Share button.
3. Select Include marker box (drag and drop it where you want).
4. Click the HTML button.
5. Copy the HTML code in the box (starts with <iframe) e.g.

Code: Select all

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.1287353038787842%2C51.49881182089415%2C-0.12051701545715333%2C51.50261870990818&amp;layer=mapnik&amp;marker=51.50071530515084%2C-0.12462615966796875" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=51.50072&amp;mlon=-0.12463#map=17/51.50072/-0.12463">View Larger Map</a></small>

6. Paste into a code editor and go through the code to make the following changes.
7. Change <iframe to <object
8. Change width and height values to 100%
9. Change src to data
10. Delete style="border: 1px solid black"
11. Change </iframe to </object
12. Change <a href to <a target="_blank" href
13. Change View Larger Map to View Larger Map in New Tab
14. Paste the changed code into language constant.

We've tested on a few browsers but not all though it was Chrome that had issues with the original code.

[Omar_one]

@heatherbell try to use https://google-map-generator.com/ ( there is an ads link on html code you can delete )
I use it without any issue on Chrome

map.JPG

[heatherbell]

( there is an ads link on html code you can delete )

Yes, I know there are numerous such websites although I thought the use of Google map on commercial websites is now paid for. My suggestion was for those with allergies to Google or those who like supporting open source projects.

[Omar_one]

will this become as PRO addon ?