How To Hide Codework While Working In A Live Miva Merchant Store

Today’s blog post comes from Miva Merchant Associate Web Developer, Zeph Dumlao

When developing for a live store, often times that means editing, adding, and/or removing HTML, Javascript, MivaScript, etc. from the store’s page templates. That’s great and all, but sometimes you want to be able to see your work without affecting the live experience of the customers shopping on the site.

We’re going to show you how you can work on code in a live store while hiding your work from the public at large. To do this, you’re first going to need to create a customer account in the store. The idea is to get the code you’re working on to only show in run-time (the part of your store that the customers see) when you are viewing the page while logged in as YOUR customer account.

Creating A Customer Account

• Log into the Admin of your store
• In the Navigational Tree on the left, click Add on the Customers branch
• Create a new Customer Account. In this example, my account will be called Developer. Click the Update button when done.

Once you create a Customer Account, the next step is to find out what the account’s Customer ID Number is. To do this, we need to drop a snippet of code in the Global Header.

• Click your store’s name on the left. This will take you to the Edit Store screen. Then click on the Global Header & Footer tab.

The snippet of code we are going to insert looks like this:

 <div style="display:none;">!@! &mvt:global:basket:cust_id;<div>

We’re going to place it in the Global Header at the very top, like so:

Click the

Update

button

Now, let’s go to the run-time portion (the part the customer’s see) of the store. Click on the View Store button on the upper right part of the Admin screen.
Go to the Customer Login page and sign in as the Customer Account you created.

Viewing The Source Code Of Your Store Page

Once you are signed in, we need to view the source code of your store page. Right-click the store page and select View Source in the context menu.

Skim over the source code, or do a search for the marker code. In this example, I do a search for !@! and find what I’m looking for.

Building A Conditional Code Snippet

Now, we’re going to build a conditional snippet of code based off of the customer ID that we acquired . The code to use will look something like this:

 <mvt:if expr="g.Basket:CUST_ID EQ 2">
        CODE_WORK_ONLY_YOU_WILL_SEE_WHILE_LOGGED_IN
     <mvt:else>
        CODE_THAT_THE_GENERAL_PUBLIC_WILL_SEE
   <mvt:if>
    

For the record, here is how this example code breaks down :

**Note: You do not need to have an “alternative action” if you do not want to. Omitting this portion then, translates to something like:
If “A” is true, do “Y”, otherwise just forget I said anything. ***

The End Results

Back in the Admin of the store, go into the Global Header & Footer section and remove the code we put in there to find out what our customer ID number was. Then paste the example “If statement” from the previous step. Click Update.

Go back to the front end of the store and refresh the screen. When you’re logged in as the customer account you created, you should see “CODE_WORK_ONLY_YOU_WILL_SEE_WHILE_LOGGED_IN”. When viewing the store while NOT logged in, you should see “CODE_THAT_THE_GENERAL_PUBLIC_WILL_SEE”.

You can use this coding idea to hide work on little coding changes, or even hide work on entire template revamps.

For instance, if you wanted to redo the layout of your Category Display page, you might go into Pages /edit CTGY /Category Product List Layout and drop this code. You can replace “CODE_THAT_THE_GENERAL_PUBLIC_WILL_SEE” with the live version of Product List Layout code (for live viewing), and replace “CODE_WORK_ONLY_YOU_WILL_SEE_WHILE_LOGGED_IN” with a work-in-progress version of the Product List Layout code.

And there you go… You just added code work to your store where you (and only you) can see it to develop, thereby not affecting the public’s shopping experience whatsoever.